<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交流</title>
    <!-- 引入ElementUI的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        /*
           设置body样式

       */
        body{
            margin: 50px;/*设置上下左右空白距离为0*/
        }
    </style>
</head>

<body>
<div id="title">
    <h1>留言板</h1>
    <el-input
            type="text"
            placeholder="请输入你的名字"
            v-model="messageBoard.author"
            maxlength="16"
            show-word-limit
    >
    </el-input>
    <div style="margin: 20px 0;"></div>
    <el-input
            type="textarea"
            placeholder="请输入留言"
            v-model="messageBoard.message"
            show-word-limit
    >
    </el-input>
    <div style="margin: 20px 0;"></div>
    <el-button type="primary" plain @click="addMessage">留言</el-button>
    <el-divider></el-divider>
    <el-table
            :data="messages"
            height="250"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="序号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="author"
                label="名字">
        </el-table-column>
        <el-table-column
                prop="message"
                label="留言">
        </el-table-column>
        <el-table-column
                prop="mtime"
                label="时间"
                width="160">
        </el-table-column>
    </el-table>
</div>

</body>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#title',
        data() {
            return {
                messageBoard: {
                    author: null,
                    message: null
                },
                messages: []
            }
        },
        methods: {
            postMessage() {
                axios.get('message/getAll', this.messages)

                    .then(t => {
                        console.log(t.data);
                        this.messages= t.data;
                    })
                    .catch(err=>{
                        alert(err)
                    })
            },

        /***
         * 发布留言
         */
            addMessage(){
                axios.post('message/addmessage?author='+this.messageBoard.author+'&message='+this.messageBoard.message)
                    .then(t=>{
                        console.log(t.data);

                            this.$message({
                                message: '留言成功',
                                type: 'success'

                        })

                    })
                    .catch(err=>{
                        alert(err)
                    })

        }
        },
        mounted(){
            this.postMessage();
        }

    });

</script>
</html>